Day13 前端網頁開發(4) Todo List

2024 iThome 鐵人賽

DAY 11

佛心分享-IT 人自學之術

什麼都摸一點！拒絕當不沾鍋！系列第 13 篇

16th鐵人賽

kkeea1020

2024-09-05 06:21:58

156 瀏覽

分享至

“Measuring programming progress by lines of code is like measuring aircraft building progress by weight.”
– Bill Gates

分析需求：

一個輸入框輸入Todo事項
一個按鈕根據輸入框的文字創建Todo事項
創建出來的Todo事項需要自帶一個用來刪除的按鈕

HTML:

<!DOCTYPE html>
<!-- index.html, script.js, style.css -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <!-- 引入CSS檔案 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <label>Enter Todo Task</label>
        <input type="text" id="todoTaskInput">
        <button id="createTodoBtn">Create</button>
        <div id="todoList"> <!-- div是一個空間 -->

        </div>
        <!-- 引入JS檔案 -->
        <script src="script.js"></script>
    </div>
</body>
</html>

接下來簡單測試(打開網頁後按F12或檢查→主控台→按下按鈕看是否有”hello”出現：

let createTodoBtnDOM = document.getElementById("createTodoBtn")
function CreateTodo()
{
    console.log("hello")  // console.log類似python的print，會在主控台顯示。
}

createTodoBtnDOM.addEventListener("click", CreateTodo)

沒問題後，開始試著從輸入框中讀取文字：

todoTasks = []
let createTodoBtnDOM = document.getElementById("createTodoBtn")
let todoTaskInputDOM = document.getElementById('todoTaskInput');
function CreateTodo()
{
    let taskName = todoTaskInputDOM.value
    todoTaskInputDOM.value="" // 清空輸入框
    if (taskName == "" || todoTasks.includes(taskName)) // 判斷如果為空或已經有這個任務
        return;
    console.log(taskName)
    todoTasks.push(taskName);
}

createTodoBtnDOM.addEventListener("click", CreateTodo)

創建todo tasks在下方(需要task名稱和一個按鈕)，所以我們直接用innerHTMl創造模板後，然後將這個模板append進todoList這個div中：

function CreateTodo()
{
    let taskName = todoTaskInputDOM.value
    todoTaskInputDOM.value=""
    if (taskName == "" || todoTasks.includes(taskName))
        return;
    console.log(taskName)
    todoTasks.push(taskName);

    let todoItem = document.createElement(`div`)
    todoItem.id = taskName
    todoItem.innerHTML = 
    `
        <span>${taskName}</span>
        <button onclick=RemoveTask(${taskName})>X</button>
    `;
    document.getElementById('todoList').appendChild(todoItem)
}

注意到我們上面創建button的時候，直接用onclick=RemoveTask(${taskName})，這樣我們每個task的按鈕都會綁定一個RemoveTask，且傳入的參數是taskName，方便後續刪除，下面讓我們實現刪除功能：

function RemoveTask(taskName)
{
    document.getElementById(taskName).remove()
    todoTasks.pop(taskName)
}

CSS的部分先使用AI生成，然後再微調：

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    box-sizing: border-box; /* 確保內邊距和邊框包含在元素的總寬度和高度內 */
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 確保內邊距和邊框包含在元素的總寬度和高度內 */
}

button {
    width: 100%;
    padding: 8px; /* 調整按鈕的內邊距 */
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

#todoList {
    margin-top: 20px;
}

#todoList div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

#todoList div span {
    flex-grow: 1;
}

#todoList div button {
    background-color: #dc3545;
    border: none;
    color: #fff;
    padding: 5px;
    border-radius: 50%; /* 將按鈕變成圓形 */
    width: 20px; /* 調整按鈕大小 */
    height: 20px; /* 調整按鈕大小 */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#todoList div button:hover {
    background-color: #c82333;
}

(延伸思考：目前的Todo List只要重新載入後就會刷新，有什麼辦法解決嗎？

[JavaScript] Cookie、LocalStorage、SessionStorage 差異 | by Peggy Chan | Medium